/**
  * Line of dots
  *
  * @author jh3y - jheytompkins.com
*/

$color: var(--primary);
$dot-size: 10px;
$dot-margin: 5px;
$first: -((2 * $dot-size) + (2 * $dot-margin));
$second: -(($dot-size) + ($dot-margin));
$third: 0;
$fourth: ($dot-size) + ($dot-margin);
$fifth: (2 * $dot-size) + (2 * $dot-margin);
$hide: -1 * $dot-size;

.line-of-dots:before {
  animation: line-of-dots 1s infinite ease backwards;
  border-radius: 100%;
  content: '';
  height: $dot-size;
  transform: translate(0, -100%);
  width: $dot-size;
}


@keyframes line-of-dots {
  0% {
    box-shadow: $first $dot-size 0 $hide $color,
      $second $dot-size 0 $hide $color,
      $third $dot-size 0 $hide $color,
      $fourth $dot-size 0 $hide $color,
      $fifth $dot-size 0 $hide $color;
  }
  10% {
    box-shadow: $first $dot-size 0 0 $color,
      $second $dot-size 0 $hide $color,
      $third $dot-size 0 $hide $color,
      $fourth $dot-size 0 $hide $color,
      $fifth $dot-size 0 $hide $color;
  }
  20% {
    box-shadow: $first $dot-size 0 0 $color,
      $second $dot-size 0 0 $color,
      $third $dot-size 0 $hide $color,
      $fourth $dot-size 0 $hide $color,
      $fifth $dot-size 0 $hide $color;
  }
  30% {
    box-shadow: $first $dot-size 0 0 $color,
      $second $dot-size 0 0 $color,
      $third $dot-size 0 0 $color,
      $fourth $dot-size 0 $hide $color,
      $fifth $dot-size 0 $hide $color;
  }
  40% {
    box-shadow: $first $dot-size 0 0 $color,
      $second $dot-size 0 0 $color,
      $third $dot-size 0 0 $color,
      $fourth $dot-size 0 0 $color,
      $fifth $dot-size 0 $hide $color;
  }
  50% {
    box-shadow: $first $dot-size 0 0 $color,
      $second $dot-size 0 0 $color,
      $third $dot-size 0 0 $color,
      $fourth $dot-size 0 0 $color,
      $fifth $dot-size 0 0 $color;
  }
  60% {
    box-shadow: $first $dot-size 0 $hide $color,
      $second $dot-size 0 0 $color,
      $third $dot-size 0 0 $color,
      $fourth $dot-size 0 0 $color,
      $fifth $dot-size 0 0 $color;
  }
  70% {
    box-shadow: $first $dot-size 0 $hide $color,
      $second $dot-size 0 $hide $color,
      $third $dot-size 0 0 $color,
      $fourth $dot-size 0 0 $color,
      $fifth $dot-size 0 0 $color;
  }
  80% {
    box-shadow: $first $dot-size 0 $hide $color,
      $second $dot-size 0 $hide $color,
      $third $dot-size 0 $hide $color,
      $fourth $dot-size 0 0 $color,
      $fifth $dot-size 0 0 $color;
  }
  90% {
    box-shadow: $first $dot-size 0 $hide $color,
      $second $dot-size 0 $hide $color,
      $third $dot-size 0 $hide $color,
      $fourth $dot-size 0 $hide $color,
      $fifth $dot-size 0 0 $color;
  }
  100% {
    box-shadow: $first $dot-size 0 $hide $color,
      $second $dot-size 0 $hide $color,
      $third $dot-size 0 $hide $color,
      $fourth $dot-size 0 $hide $color,
      $fifth $dot-size 0 $hide $color;
  }
}
